<template>
    <div>
        <common-title :stitle="alldata.stitle"></common-title>
        <div :id="'rank' + alldata.itemid" style="height:265px; overflow: auto;">1</div>
        <van-button type="default" block @click="showRank(alldata)">查看明细</van-button>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import commonTitleMixin from '../mixins/commonTitleMixin'
export default {
    name: 'diamond',
    data: function () {
        return {
        }
    },
    props: ['alldata'],
    mixins: [commonTitleMixin],
    mounted () {
        this.init()
    },
    methods: {
        init: function () {
            let id = 'rank' + this.alldata.itemid
            if (!this.alldata.valuearr) {
                document.getElementById('rank' + id).innerHTML = '暂无数据'
                return
            }
            var myChart1 = echarts.init(document.getElementById(id))
            // 绘制图表
            myChart1.setOption(
                {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '20%'
                },
                legend: {
                    data: [this.alldata.snamearr[1]]
                },
                xAxis: {
                    type: 'value',
                    name: this.alldata.snamearr[1] + '(' + this.alldata.measurearr[0] + ')',
                    nameLocation: 'middle',
                    nameTextStyle: {
                        padding: [13, 13, 13, 13]
                    },
                    boundaryGap: [0, 0.01],
                    minInterval: 1
                },
                yAxis: {
                    type: 'category',
                    name: this.alldata.snamearr[0] + '(公司排名)',
                    data: this.alldata.valuearr
                },
                series: [
                    {
                        name: this.alldata.snamearr[1],
                        type: 'bar',
                        data: this.alldata.value0arr
                    }
                ]
            }
        )
        },
        showRank (item) {
            this.$router.push({ name: 'showrank', query: { item: item } })
        }
    }
}
</script>
